<template>
    <view>
        <!-- 顶部 -->
        <topNav navTitle="租租侠"></topNav>
        <!-- 导航栏 -->
        <view class="tabs" v-if="tabsShow">
            <u-tabs :list="tabs" lineColor="#FFCE00" @click="tabCk" :current="current"></u-tabs>
        </view>
        <view class="swiper">
            <u-swiper :list="list1" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px" height="280"></u-swiper>
            <view class="indicator-num">
                <view class="indicator-num__text">
                    <b class="fs32">{{ currentNum + 1 }}</b>
                    /
                    <b>{{ list1.length }}</b>
                </view>
            </view>
            <view class="sharp"><u-icon name="share-square" size="28" color="#fff"></u-icon></view>
        </view>

        <!-- 主体部分 -->
        <view class="main">
            <view class="card">
                <view class="flex jcc"><u-icon name="arrow-up" bold size="26" color="#EEEEEE"></u-icon></view>
                <view id="base"></view>
                <view class="mcard firstcard">
                    <view class="flex jcsb">
                        <view class="title">【出租】超豪办公室出租 智慧新城全 包 拎包入驻 50方办公室</view>
                        <view class="flex column aic">
                            <u-icon name="heart" bold size="26" color="#000"></u-icon>
                            <text class="fs18 c9">收藏</text>
                        </view>
                    </view>
                    <view class="flex jcsa mgt20">
                        <view class="ftitle">
                            <view class="redTitle">
                                <text class="fs32">0.4</text>
                                元/㎡/天
                            </view>
                            <view class="bottomTitle">压2付6</view>
                        </view>
                        <view class="ftitle">
                            <view class="redTitle">
                                <text class="fs32">600</text>
                                元/月
                            </view>
                            <view class="bottomTitle">月租金</view>
                        </view>
                        <view class="ftitle">
                            <view class="redTitle">
                                <text class="fs32">50</text>
                                ㎡
                            </view>
                            <view class="bottomTitle">面积</view>
                        </view>
                    </view>
                    <view class="mapContent">
                        <view class="map">
                            <view class="txt1 fwb">智慧新城</view>
                            <view class="mgt10 c7">近智慧新城地铁站·相距632米</view>
                        </view>
                        <view class="goThat">
                            <text>从这里出发，看看距离您多远?</text>
                            <u-icon name="arrow-right" size="18" color="#CED3DB"></u-icon>
                        </view>
                    </view>
                    <view class="msg">
                        <view>
                            <text class="c9 mgr10">类型</text>
                            <text>商业综合楼</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">层高</text>
                            <text>34/54</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">注册</text>
                            <text>可注册</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">装修</text>
                            <text>精装修</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">分割</text>
                            <text>不可分割</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">层使用率高</text>
                            <text>85%</text>
                        </view>
                        <view>
                            <text class="c9 mgr10">支付</text>
                            <text>预付6个月，押金2个月</text>
                        </view>
                    </view>
                    <view class="tagList">
                        <view>商业综合楼</view>
                        <view>新房</view>
                        <view>精装修</view>
                        <view>可注册</view>
                    </view>
                </view>
                <view id="fyjs"></view>
                <view class="mcard">
                    <view class="busMsg">
                        <view class="flex aic">
                            <u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg" class="mgr20"></u-avatar>
                            <view>
                                <view class="flex">
                                    <text class="mgr8">黄先生</text>
                                    <view class="shiming">
                                        <u-icon name="calendar"></u-icon>
                                        <text>已实名</text>
                                    </view>
                                </view>
                                <view class="fs24 c9">个人</view>
                            </view>
                        </view>
                        <view class="btn">
                            <u-icon name="phone-fill" size="28" color="#121407"></u-icon>
                        </view>
                    </view>
                    <view class="hoserLight">
                        <view class="txt1">房源亮点</view>
                        <view class="txt2">{{ title }}</view>
                    </view>
                    <view class="flex jcc mgt20">
                        <view class="showAll">
                            <text class="mgr10">展开全部</text>
                            <u-icon name="arrow-down" size="18" color="#F46900"></u-icon>
                        </view>
                    </view>
                </view>
                <view id="ptss"></view>
                <view class="mcard">
                    <view class="fs30 fwb">配套设施</view>
                    <view class="mgt20 flex">
                        <view class="sheshi" v-for="i in tapList">
                            <view class="">{{ i.name }}</view>
                            <view class="gapTap">
                                <view class="flex" v-for="j in i.list" :class="!j.disable ? 'disabled' : ''">
                                    <u-icon name="checkmark" class="mgr10"></u-icon>
                                    <text>{{ j.name }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="houseDt">
                        <view class="flex jcsb">
                            <view>房源动态</view>
                            <view class="flex c8">
                                <text>更多</text>
                                <u-icon name="arrow-right" class="mgr10"></u-icon>
                            </view>
                        </view>

                        <step></step>
                    </view>
                </view>
                <view id="zbsh"></view>
                <view class="mcard">
                    <view class="zbsh">
                        <view class="flex jcsb">
                            <view>周边生活</view>
                            <view class="flex c8">
                                <text>查看地图</text>
                                <u-icon name="arrow-right" class="mgr10"></u-icon>
                            </view>
                        </view>
                        <view class="map">
                            <image src="../../static/fyxq.png" mode="aspectFill" class="img"></image>
                        </view>
                        <view class="zbTabs">
                            <view class="flex jcsb mgt10 fs30 pd8">
                                <view @click="currentNum = 0">交通出行</view>
                                <view @click="currentNum = 1">商场购物</view>
                                <view @click="currentNum = 2">休闲娱乐</view>
                                <view @click="currentNum = 3">教育医疗</view>
                            </view>
                            <view class="btLan" :style="{ left: LeftTabs }"></view>
                        </view>
                        <view class="pd8 fs28 flex">
                            <view class="mgr20 txt">地铁站</view>
                            <view class="w100">
                                <view class="flex jcsb">
                                    <view class="flex">
                                        <view class="mgr30">祖庙地铁站</view>
                                        <view class="tag">广佛线</view>
                                    </view>
                                    <view>2.0km</view>
                                </view>
                            </view>
                        </view>
                        <view class="pd8 fs28 flex">
                            <view class="mgr20 txt">公交站</view>
                            <view class="w100">
                                <view class="flex jcsb mgb20">
                                    <view>祖庙路A</view>
                                    <view>2.0km</view>
                                </view>
                                <view class="flex jcsb w100">
                                    <view>祖庙路A</view>
                                    <view>2.0km</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view id="djkk"></view>
                <view class="pd40">
                    <view class="fwb">大家都在看</view>
                    <view class="djsee">
                        <image src="../../static/fyxq.png" mode="center" class="tjimg mgr20"></image>
                        <image src="../../static/fyxq.png" mode="center" class="tjimg"></image>
                    </view>
                </view>
            </view>
        </view>
        <tabbar></tabbar>
    </view>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';

const list1 = reactive([
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper3.png'
]);
const currentNum = ref(0);

const title = ref('(1)祖庙商铺，地段好，精装修，周边配套设施完善\n(2)实租办公室预算不够，可选地址托管\n(3)可以注册公司，可申请发票，配合');
const tapList = reactive([
    {
        name: '基础设施',
        list: [
            { name: '物管', disable: true },
            { name: '会议室', disable: false },
            { name: '会议室', disable: true },
            { name: '办公桌', disable: true },
            { name: '水电', disable: true },
            { name: '宽带', disable: true }
        ]
    },
    {
        name: '更多设施',
        list: [
            { name: '饮水机', disable: true },
            { name: '视频监控', disable: false },
            { name: '智能门锁', disable: true },
            { name: '座机电话', disable: false },
            { name: '微波炉', disable: true }
        ]
    }
]);

const LeftTabs = computed(() => {
    return 20 + currentNum.value * 165 + 'rpx';
});
const tabs = reactive([{ name: '基本信息' }, { name: '房源介绍' }, { name: '配套设施' }, { name: '周边生活' }, { name: '大家都在看' }]);

//滚动事件
const current = ref(0);
const tabCk = (e) => {
    uni.pageScrollTo({
        scrollTop: topList[e.index] - 100,
        duration: 300
    });
};
const topList = [];

const getHeight = () => {
    const query = uni.createSelectorQuery();
    const list = ['#base', '#fyjs', '#ptss', '#zbsh', '#djkk'];
    list.map((i) => {
        query
            .selectAll(i)
            .boundingClientRect((res) => {
                if (!topList.includes(res[0].top)) topList.push(res[0].top);
            })
            .exec();
    });
};

const tabsShow = ref(false);
onPageScroll((e) => {
    let sTop = e.scrollTop;
    if (sTop > 270) {
        tabsShow.value = true;
    } else {
        tabsShow.value = false;
    }
    current.value = topList.findIndex((idx) => sTop < idx);
});
onMounted(() => {
    getHeight();
});
</script>

<style lang="scss">
page {
    font-family: Noto Sans S Chinese;
}
.swiper {
    position: relative;
    .sharp {
        position: absolute;
        right: 30rpx;
        top: 20rpx;
        @include flex-box-set();
        width: 70rpx;
        height: 70rpx;
        background: rgb(0, 0, 0, 0.5);
        border-radius: 50%;
    }
    .indicator-num {
        position: absolute;
        right: 30rpx;
        bottom: 50rpx;
        padding: 10rpx 30rpx;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        &__text {
            color: #ffffff;
            font-size: 24rpx;
        }
    }
}
.tabs {
    position: fixed;
    top: 100rpx;
    left: 0;
    z-index: 300;
    width: 100%;
    background-color: #fff;
}
.main {
    transform: translate(0, -25rpx);
    .card {
        border-radius: 24rpx;
        background: linear-gradient(0deg, #f6f6f6 0%, #ffffff 100%);
        .mcard {
            margin: 20rpx 30rpx;
            background-color: #fff;
            padding: 35rpx 20rpx;
            box-sizing: border-box;
            font-family: Noto Sans S Chinese;
            &.firstcard {
                padding: 20rpx;
            }
            .title {
                @include ellipsis(2);
                text-indent: 1rem;
                margin-right: 20rpx;
                font-weight: 550;
            }
            .ftitle {
                flex-direction: column;
                @include flex-box-set();
                .redTitle {
                    font-weight: bold;
                    font-size: 24rpx;
                    color: #df0000;
                }
                .bottomTitle {
                    font-family: Noto Sans S Chinese;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                    line-height: 52rpx;
                }
            }
            .mapContent {
                position: relative;

                .map {
                    width: 650rpx;
                    height: 190rpx;
                    background: #f0f8ff;
                    border-radius: 14rpx;
                    margin-top: 20rpx;
                    padding: 20rpx;
                    box-sizing: border-box;
                    font-size: 24rpx;
                    .txt1 {
                        font-size: 30rpx;
                    }
                }
                .goThat {
                    width: 650rpx;
                    height: 60rpx;
                    background: #ffffff;
                    border-radius: 0rpx 0rpx 14rpx 14rpx;
                    font-size: 22rpx;
                    @include flex-box();
                    padding: 0 10rpx;
                    position: absolute;
                    bottom: 2rpx;
                    box-sizing: border-box;
                    text-indent: 12rpx;
                }
            }
            .msg {
                margin-top: 20rpx;
                font-size: 24rpx;
                display: grid;
                gap: 10rpx;
                grid-template-columns: 1fr 1fr;
            }
            .tagList {
                margin-top: 10rpx;
                view {
                    @include flex-box-set();
                    display: inline-flex;
                    padding: 0 8rpx;
                    margin-right: 20rpx;
                    height: 56rpx;
                    background: #f6f6f6;
                    border-radius: 4rpx;
                    font-family: Noto Sans S Chinese;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                }
            }
            .busMsg {
                @include flex-box();
                text {
                    font-family: Noto Sans S Chinese;
                    font-weight: 500;
                    font-size: 30rpx;
                    color: #121407;
                    line-height: 36rpx;
                }
                .shiming {
                    @include flex-box-set();
                    width: 120rpx;
                    height: 32rpx;
                    background: #f9f5e4;
                    border-radius: 4rpx;
                    margin-left: 20rpx;
                    padding: 8rpx 0;
                    text {
                        font-family: Noto Sans S Chinese;
                        font-weight: 400;
                        font-size: 23rpx;
                        color: #84642e;
                    }
                }
                .btn {
                    @include flex-box-set();
                    width: 76rpx;
                    height: 76rpx;
                    background: #ffce00;
                    border-radius: 38rpx;
                }
            }
            .hoserLight {
                margin-top: 40rpx;
                font-family: Noto Sans S Chinese;
                font-weight: 400;
                font-size: 24rpx;
                color: #121407;
                line-height: 52rpx;
                white-space: pre-wrap;
            }
            .showAll {
                @include flex-box-set();
                width: 180rpx;
                height: 60rpx;
                background: #fef8e2;
                border-radius: 14rpx;
                font-family: Noto Sans S Chinese;
                font-weight: 500;
                font-size: 26rpx;
                color: #f46900;
                line-height: 36rpx;
                padding: 10rpx;
                box-sizing: border-box;
            }
            .sheshi {
                background: #fffcf0;
                border-radius: 14rpx;
                padding: 20rpx;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 24rpx;
                color: #84642e;
                line-height: 52rpx;
                &:first-child {
                    margin-right: 20rpx;
                }
                .disabled {
                    opacity: 0.5 !important;
                }
                .gapTap {
                    display: grid;
                    gap: 10rpx;
                    grid-template-columns: 1fr 1fr;
                }
            }
            .houseDt {
                font-family: Noto Sans S Chinese;
                font-weight: 500;
                font-size: 30rpx;
                color: #121407;
                line-height: 52rpx;
                margin-top: 40rpx;
            }
            .zbsh {
                .map {
                    width: 630rpx;
                    height: 280rpx;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .txt {
                    width: 120rpx;
                }
                .zbTabs {
                    position: relative;
                    .btLan {
                        width: 98rpx;
                        height: 8rpx;
                        background: linear-gradient(90deg, #fef8e2 0%, #ffce00 100%);
                        border-radius: 4rpx;
                        position: absolute;
                        bottom: 15rpx;
                        left: 20rpx;
                        opacity: 0.9;
                        transition: 0.5s;
                    }
                }
                .tag {
                    @include flex-box-set();
                    display: inline-flex;
                    padding: 0 8rpx;
                    margin-right: 20rpx;
                    height: 56rpx;
                    background: #f6f6f6;
                    border-radius: 4rpx;
                    font-family: Noto Sans S Chinese;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                }
            }
        }
        .djsee {
            display: flex;
            margin-top: 20rpx;
            .tjimg {
                width: 330rpx;
                height: 466rpx;
                background: #f6f6f6;
                border-radius: 24rpx;
            }
        }
    }
}
</style>
